<template>
	<view class="main">
		<view class="card" :style="{'background-color':color}">
		<image class="icon" :src="img"/>
		<view class="text">
			<view>
			<view style="font-size: 28px;">{{title}}</view>
			<view style="font-size: 14px;">{{desc}}</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			color:{
				type:String,
				default(){
					return '#fff'
				}
			},
			img:{
				type:String,
				default(){
					return ''
				}
			},
			title:{
				type:String,
				default(){
					return ''
				}
			},
			desc:{
				type:String,
				default(){
					return ''
				}
			},
						
		},
		name:"btnCard",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.card{
	background-color: #adc0f9;
	    display: flex;
	    height: 128px;
	    width: 100%;
		
		border-radius: 13px;
		    box-shadow: 2 18 black;
		    box-shadow: 0px 1px 8px 0px #00000087;
}
.main{
	padding: 15px;
}
.icon{
	width: 30%;
	    height: 128px;
		padding: 25px;
}
.text{
	display: flex;
	    justify-content: center;
	    align-items: center;
}
</style>